<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>商品名称：</span>
            <el-input placeholder="请输入商品名称" clearable v-model="flowerName"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>买家昵称：</span>
            <el-input placeholder="请输入买家昵称" clearable v-model="nickName">
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>订单编号：</span>
            <el-input placeholder="请输入订单编号" clearable v-model="orderId">
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="input-span-wrapper">
            <span>交易状态：</span>
            <el-select v-model="status" placeholder="请选择交易状态">
              <el-option label="超时" value="0"></el-option>
              <el-option label="未支付" value="1"></el-option>
              <el-option label="已付款" value="2"></el-option>
              <el-option label="已接单" value="3"></el-option>
              <el-option label="已发货" value="4"></el-option>
              <el-option label="已收货" value="5"></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <div class="input-span-wrapper" id="timeDiv">
            <span>下单时间：</span>
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" type="date"
                            placeholder="选择日期"></el-date-picker>
            至
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="date"
                            placeholder="选择日期"></el-date-picker>
            <el-button type="primary" @click="searchOrder" round>搜索</el-button>
            <el-button  @click="resetForm" round>重置</el-button>
          </div>
        </el-col>
      </el-row>


      <el-table
          :data="orderList"
          border
          style="width: 100%; margin-top: 20px">
        <el-table-column
            align="center"
            prop="orderId"
            label="订单号">
        </el-table-column>
        <el-table-column label="商品"  align="center">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.flowerName }}</p>
              <el-image
                  style="width: 100px; height: 100px"
                  :src="img+scope.row.flowerImg"
                  :fit="fit"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="flowerPrice"
            label="单价（元）">
        </el-table-column>
        <el-table-column
            align="center"
            prop="buyCount"
            label="数量">
        </el-table-column>
        <el-table-column
            align="center"
            prop="total"
            label="实付款（元）">
        </el-table-column>
        <el-table-column
            align="center"
            prop="status"
            label="交易状态"
            :formatter="statusFormatter">
        </el-table-column>
        <el-table-column
            align="center"
            prop="createTime"
            label="下单时间">
        </el-table-column>
        <el-table-column
            align="center"
            prop="nickName"
            label="买家昵称">
        </el-table-column>
      </el-table>

    </el-card>

    <div align="center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderView",
  data() {
    return {
      img: "http://localhost:8088/image/Test/",
      fit: 'contain',
      orderList: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
      status: '',
      nickName: '',
      orderId: '',
      flowerName: '',
      startTime: '',
      endTime: '',
      isSearching: false,
    }
  },
  created() {
    this.getAllOrder();
  },
  methods: {
    getAllOrderList(url, params) {
      this.$axios.get(url, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...params
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.orderList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        }
      })
    },

    getAllOrder() {
      let url = "/order/findAllOrderByPage"
      this.getAllOrderList(url, {});
    },

    searchOrder() {
      // 根据需要更新 searchInput 的值
      let url = "/order/findOrderByCondition";
      this.getAllOrderList(url, {
        status: this.status,
        nickName: this.nickName,
        orderId: this.orderId,
        flowerName: this.flowerName,
        startTime: this.startTime,
        endTime: this.endTime
      });
      this.isSearching = true;
    },

    resetForm() {
      this.status = '';
      this.nickName = '';
      this.orderId = '';
      this.flowerName = '';
      this.startTime = '';
      this.endTime = '';
    },

    handleSizeChange(val) {
      this.pageSize = val;
      if (this.isSearching) {
        this.searchOrder();
      } else {
        this.getAllOrder();
      }
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.isSearching) {
        this.searchOrder();
      } else {
        this.getAllOrder();
      }
    },


    statusFormatter(row, column, cellValue) {
      if (cellValue === "0") {
        return '超时';
      } else if (cellValue === "1") {
        return '未支付';
      } else if (cellValue === "2") {
        return '已付款';
      } else if (cellValue === "3") {
        return '已接单';
      } else if (cellValue === "4") {
        return '已发货';
      } else if (cellValue === "5") {
        return '已收货';
      }
    },

  }
}
</script>